<template>
  <div>

    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="50%"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="楼栋名称" prop="buildingName">
          <el-input v-model="form.buildingName" placeholder="请输入楼栋名称" />
        </el-form-item>
        <el-form-item label="楼栋面积" prop="buildingAcreage">
          <el-input v-model="form.buildingAcreage" placeholder="请输入楼栋面积" />
        </el-form-item>
        <el-form-item label="小区名称">
          <el-select v-model="form.communityId" placeholder="请选择" clearable>
            <el-option
              v-for="item in communityNameList"
              :key="item.communityId"
              :label="item.communityName"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <el-row>
        <el-col :span="24" style="margin-left: 30%">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button style="margin-left: 8%" type="primary" @click="save(form.buildingId)">确 定</el-button>
        </el-col>
      </el-row>
    </el-dialog>

    <el-row :gutter="20">
      <el-form>
        <el-col :span="4">
          <el-form-item label="楼栋名称">
            <el-input
              v-model="searchBuildingName"
              placeholder="请输入楼栋名称"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="楼栋编码">
            <el-input
              v-model="zyBuilding.buildingCode"
              placeholder="请输入楼栋编码"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="小区名称">
            <el-select v-model="communityId" placeholder="请选择" clearable>
              <el-option
                v-for="item in communityNameList"
                :key="item.communityId"
                :label="item.communityName"
                :value="item"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="search(searchBuildingName,zyBuilding.buildingCode)"
            >搜索
            </el-button>
            <el-button type="success" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>

    </el-row>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="add">新增</el-button>
      </el-col>
<!--      <el-col :span="1.5">-->
<!--        <el-button type="success" icon="el-icon-edit" size="mini" @click="update()">修改</el-button>-->
<!--      </el-col>-->
      <el-col :span="1.5">
        <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple" @click="deleteBuildingByIds">
          删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" icon="el-icon-download" :disabled="multiple" size="mini" @click="exportTable">导出
        </el-button>
      </el-col>
    </el-row>
    <el-table
      ref="multipleTable"
      :data="buildingList"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >

      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        label="楼栋id"
        width="120"
      >
        <template slot-scope="scope">{{ scope.row.buildingId }}</template>
      </el-table-column>
      <el-table-column
        label="楼栋名称"
        width="150"
      >
        <template slot-scope="scope">{{ scope.row.buildingName }}</template>
      </el-table-column>
      <el-table-column
        label="楼栋编码"
        width="150"
      >
        <template slot-scope="scope">{{ scope.row.buildingCode }}</template>
      </el-table-column>
      <el-table-column
        label="楼栋面积"
        width="150"
      >
        <template slot-scope="scope">{{ scope.row.buildingAcreage }}</template>
      </el-table-column>
      <el-table-column
        label="小区名称"
        width="150"
      >
        <template slot-scope="scope">{{ scope.row.zyCommunity.communityName }}</template>
      </el-table-column>
      <el-table-column
        label="创建时间"
        width="150"
      >
        <template slot-scope="scope">{{ scope.row.createTime }}</template>
      </el-table-column>
      <el-table-column
        label="备注"
        width="150"
      >
        <template slot-scope="scope">{{ scope.row.remark }}</template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="150"
      >
        <template slot-scope="scope">
          <a href="#" style="color: dodgerblue" @click.prevent="updateOne(scope.row)"><i class="el-icon-edit">修改</i></a>
          <a href="#" style="color: dodgerblue" @click="deleteOne(scope.row.buildingId)"><i
            class="el-icon-delete-solid"
          >删除</i></a>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="this.currentPage"
      :page-sizes="[2, 4, 8, 16]"
      :page-size="this.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="this.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
export default {
  name: 'BuildingManage',
  data() {
    return {
      buildingList: [],
      communityId: '',
      zyBuilding: {
        'buildingId': '',
        'buildingCode': '',
        'buildingName': '',
        'buildingAcreage': '',
        'createTime': '',
        'remark': ''
      },
      pageSize: 2,
      currentPage: 1,
      total: 0,
      ids: [],
      dialogVisible: false,
      pages:0,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      communityNameList: [],
      searchBuildingName: '',
      title: '',
      form: {},
      rules: {
        buildingName: [
          { required: true, message: '楼栋名称不能为空', trigger: 'blur' }
        ],
        buildingAcreage: [
          {
            pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
            message: '请输入正确格式,可保留两位小数',
            trigger: 'change'
          }
        ]
      }

    }
  }, created() {
    this.loadBuildingList(this.currentPage, this.pageSize)
    this.loadCommunityNameList()
  }, methods: {
    loadBuildingList(currentPage, pageSize) {
      this.axios.post('/building/page?currentPage=' + currentPage + '&pageSize=' + pageSize, this.zyBuilding)
        .then(res => {
          console.log(res)
          this.buildingList = res.data.data.records
          this.total = res.data.data.total
          this.pages=res.data.data.pages
        })
    }, handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.loadBuildingList(this.currentPage, pageSize)
    }, handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.loadBuildingList(currentPage, this.pageSize)
    },search(name, code) {
      console.log(name + '----' + code)
      this.zyBuilding.buildingName = name
      this.zyBuilding.buildingCode = code
      this.axios.post('/building/page?currentPage=' + this.currentPage + '&pageSize=' + this.pageSize, {
        'buildingName': name,
        'buildingCode': code
      })
        .then(res => {
          this.buildingList = res.data.data.records
          this.total = res.data.data.total
        })},
    resetQuery() {this.zyBuilding = {'buildingId': '', 'buildingCode': '', 'buildingName': '', 'buildingAcreage': '', 'createTime': '', 'remark': ''}
      this.loadBuildingList(this.currentPage, this.pageSize)},
    handleSelectionChange(selection){
      this.ids = selection.map(item => item.buildingId)
      console.log(this.ids)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    } , add() {
      this.dialogVisible = true
      this.title = '添加楼栋'
      this.form = {
        'buildingId': '',
        'buildingCode': '',
        'buildingName': '',
        'buildingAcreage': '',
        'createTime': '',
        'remark': ''
      }
    },
    update(row) {
      console.log(row)
      this.dialogVisible = true
      this.form = row
      this.updateOne(this.form)
    }, deleteBuildingByIds(row){
      const buildingIds = row.buildingId || this.ids
      this.axios.post('/building/deleteByIds', buildingIds).then(res => {
        if (res.data.data === '删除成功') {
          this.$message({
            message: '删除成功!',
            type: 'success',
            center: 'true'
          })
        }
        if((this.total-this.ids.length)%this.pageSize==0){
          this.currentPage-=1
        }
        this.loadBuildingList(this.currentPage, this.pageSize)
      })
    },exportTable(row){
      const buildingIds = row.buildingId || this.ids
      this.axios.post('/building/excel', buildingIds).then(res => {
        console.log(res.data.data)
        if (res.data.data === '导出成功') {
          this.$message({
            message: '已成功导入桌面',
            type: 'success'
          })
        }
      })
    }, deleteOne(id) {

    }, updateOne(row) {
      this.dialogVisible = true
      this.title = '修改楼栋'
      this.form = row
    }, save(id) {
      this.dialogVisible = false
      if (id === '' || typeof (id) === 'undefined') {
        this.zyBuilding.buildingName = this.form.buildingName
        this.zyBuilding.buildingAcreage = this.form.buildingAcreage
        this.zyBuilding.remark = this.form.remark
        this.axios.post('/building/add', this.zyBuilding)
          .then(res => {
            if (res.data.data === '添加成功') {
              this.$message({
                message: '添加成功!',
                type: 'success',
                center: 'true'
              })
            }
            console.log(this.currentPage+"--------------"+this.pageSize)
            this.zyBuilding = {
              buildingId: '',
              buildingCode: '',
              buildingName: '',
              buildingAcreage: '',
              createTime: '',
              remark: ''
            }
            console.log(this.zyBuilding.buildingName)
            this.loadBuildingList(this.currentPage, this.pageSize)

          })
      } else {
        this.axios.put('/building/update', this.form).then(res => {
          if (res.data.data === '修改成功') {
            this.$message({
              message: '修改成功!',
              type: 'success',
              center: 'true'
            })
            this.loadBuildingList(this.currentPage, this.pageSize)
            this.form = {
              'buildingId': '',
              'buildingCode': '',
              'buildingName': '',
              'buildingAcreage': '',
              'createTime': '',
              'remark': ''
            }
          }
        })
      }
    },
    loadCommunityNameList() {
      this.axios.get('/community/nameList').then(res => {
        this.communityNameList = res.data.data
        console.log(res.data.data)})
    }
  }
}
</script>

<style scoped>

</style>
